<template>
	<el-popover
		:popper-class="$style['popover-class']"
		width="200px"
		trigger="click"
		title="列设置"
		placement="bottom"
		:disabled="loading"
	>
		<template #reference>
			<el-button text icon="Operation" circle v-ripple :disabled="loading"></el-button>
		</template>
		<vue-draggable-next v-model="options">
			<transition-group>
				<div class="option-item" v-for="item in options" :key="item.key || item.title">
					<svg
						viewBox="64 64 896 896"
						focusable="false"
						data-icon="holder"
						width="1em"
						height="1em"
						fill="currentColor"
						aria-hidden="true"
					>
						<path
							d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
						></path>
					</svg>
					<el-checkbox class="el-checkbox" v-model="item.show" :checked="item.show !== false">
						<div class="tov">{{ item.title }}</div>
					</el-checkbox>
				</div>
			</transition-group>
		</vue-draggable-next>
	</el-popover>
</template>

<script setup>
import { computed } from "vue"
import { VueDraggableNext } from "vue-draggable-next"
import { useUserInfoStore } from "/store/userInfo"

const props = defineProps({
	loading: {
		type: Boolean,
		default: true,
	},
	tableOptions: {
		type: Array,
	},
})

const userInfoStore = useUserInfoStore()
const options = computed({
	get() {
		if (props.tableOptions) {
			return props.tableOptions.filter(item => {
				let hasAuth = true
				if (item.auth) {
					hasAuth = userInfoStore.hasAuth(item.auth)
				}
				return hasAuth && item.key && item.visible !== false
			})
		}
		return []
	},
	set(value) {
		if (props.tableOptions) {
			props.tableOptions.splice(0, value.length, ...value)
		}
	},
})
</script>

<style lang="scss" scoped>
.option-item {
	position: relative;
	cursor: pointer;
	transition: all 0.25s;
	padding-left: 5px;
	border-radius: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	&:hover {
		background: #f5f5f5;
	}
	.el-checkbox {
		width: 100%;
	}
	svg {
		margin-right: 5px;
		cursor: all-scroll;
	}
}
.tov {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>

<style lang="scss" module>
.popover-class {
	max-height: 50vh;
	overflow-y: auto;
}
</style>
